{% extends "base.html" %}
{% load crispy_forms_filters %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "账号" %}{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card shadow">
        <div class="card-header bg-primary text-white">
          <h1 class="h4 mb-0">{% trans "电子邮件地址" %}</h1>
        </div>
        <div class="card-body">
          {% if user.emailaddress_set.all %}
          <p>{% trans '以下电子邮件地址已与您的账号关联:' %}</p>

          <form action="{% url 'account_email' %}" class="email_list" method="post">
            {% csrf_token %}
            <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th>{% trans '电子邮件' %}</th>
                    <th>{% trans '状态' %}</th>
                    <th>{% trans '主要' %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for emailaddress in user.emailaddress_set.all %}
                  <tr>
                    <td>
                      <label for="email_radio_{{ forloop.counter }}" class="form-check-label">
                        <input id="email_radio_{{ forloop.counter }}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %} value="{{ emailaddress.email }}" class="form-check-input"/>
                        {{ emailaddress.email }}
                      </label>
                    </td>
                    <td>
                      {% if emailaddress.verified %}
                      <span class="badge bg-success">{% trans "已验证" %}</span>
                      {% else %}
                      <span class="badge bg-warning text-dark">{% trans "未验证" %}</span>
                      {% endif %}
                    </td>
                    <td>
                      {% if emailaddress.primary %}
                      <span class="badge bg-primary">{% trans "主要" %}</span>
                      {% endif %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

            <div class="d-flex flex-wrap gap-2 mt-3">
              <button class="btn btn-primary" type="submit" name="action_primary">{% trans '设为主要' %}</button>
              <button class="btn btn-info text-white" type="submit" name="action_send">{% trans '重新发送验证' %}</button>
              <button class="btn btn-danger" type="submit" name="action_remove">{% trans '删除' %}</button>
            </div>
          </form>

          {% else %}
          <p><strong>{% trans '警告:' %}</strong> {% trans "您当前没有添加任何电子邮件地址。您确定要继续吗?" %}</p>
          {% endif %}

          <hr class="my-4">

          <h2 class="h5">{% trans "添加电子邮件地址" %}</h2>

          <form method="post" action="{% url 'account_email' %}" class="add_email">
            {% csrf_token %}
            {{ form|crispy }}
            <button class="btn btn-primary" name="action_add" type="submit">{% trans "添加电子邮件" %}</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
(function() {
  var message = "{% trans '您确定要删除所选电子邮件地址吗?' %}";
  var actions = document.getElementsByName('action_remove');
  if (actions.length) {
    actions[0].addEventListener("click", function(e) {
      if (! confirm(message)) {
        e.preventDefault();
      }
    });
  }
})();
</script>
{% endblock %}

